<template>
  <div class="login">
    <el-form class="login-form">
      <h3 class="title">DongBB</h3>

      <el-alert
        :title="loginForm.errorMsg"
        type="error"
        v-show="loginForm.errorVisible"
      >
      </el-alert>

      <el-form-item>
        <el-input
          v-model="loginForm.username"
          type="text"
          auto-complete="off"
          placeholder="账号"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="loginForm.password"
          type="password"
          auto-complete="off"
          placeholder="密码"
        >
        </el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button
          @click="userpwdLogin"
          size="medium"
          type="primary"
          style="width: 100%"
        >
          <span>登 录</span>
        </el-button>
        <el-checkbox v-model="checked">记住密码</el-checkbox>
        <!-- <el-row :gutter="20">
                <el-col :span="12">
                  <el-button @click="userpwdLogin" size="medium" type="primary" style="width:100%;">
                    <span>登 录</span>
                  </el-button>
                </el-col>
                <el-col :span="12">
                  <el-button @click="dialogVisible = true" size="medium" type="success" style="width:100%;">
                    <span>获取密码</span>
                  </el-button>
                </el-col>
              </el-row> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { setJwtToken } from "@/lib/utils";
import { login } from "@/api/system/sys_user";
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        errorMsg: "",
        errorVisible: false,
      },
      dialogVisible: false,
      checked: true,
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    userpwdLogin() {
      var vm = this;
      login(this.loginForm.username, this.loginForm.password)
        .then((res) => {
          var remeberFlag;
          //判断复选框是否被勾选
          if (vm.checked == true) {
            // console.log("checked == true");
            remeberFlag = "true";
          } else {
            remeberFlag = "false";
          }
          console.log(remeberFlag);
          //调用配置cookie方法,传入账号名，密码，和保存天数3个参数
          vm.setCookie(
            vm.loginForm.username,
            vm.loginForm.password,
            7,
            remeberFlag
          );

          setJwtToken(res.data);
          this.$router.push("home");
        })
        .catch((err) => {
          this.loginForm.errorMsg = err.message;
          this.loginForm.errorVisible = true;
        });
    },
    getPassword() {},
    //设置cookie
    setCookie(c_name, c_pwd, exdays, remeberFlag) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "remeberFlag" +
        "=" +
        remeberFlag +
        ";path=/;expires=" +
        exdate.toGMTString();
    },
    //读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "userName") {
            this.loginForm.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "userPwd") {
            this.loginForm.password = arr2[1];
          }
        }
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/img/login-bg.jpg");
  background-size: cover;
}
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
}
</style>